<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css">
    #choise label{margin-left: 30px;}
    .detail{
        z-index: 19891015;
        /*width: 360px;*/
        height: 50%;
        display: none;
        /*margin-left: -66%;*/
        border: 1px solid #666;
        /*border-radius: 0.5;*/
        box-shadow: 1px 1px 50px rgb(0 0 0 / 30%) !important;
    }
    #loading {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/assets/img/loading.gif) no-repeat center;
        z-index: 9999;
        text-align: center;
        display: none
    }
    #loading img {
        position: absolute;
        top: 30%
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">数据概览</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="content" style="background:#f1f4f6;">

                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-6">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <h4>用户数据统计</h4>
                                    <form id="form2" action="" role="form" novalidate="novalidate" class="form-inline nice-validator n-default n-bootstrap">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </span>
                                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:360px;" >
                                        </div>
                                    </form>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th class="text-center">用户地址</th>
                                            <th class="text-center">任务总数</th>
                                        </tr>
                                        </thead>
                                        <tbody id="userdata">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="loading" style="display: none;"></div>
<script type="text/javascript">
    $(function(){
        usermange();
        // Reap任务用户统计
        function usermange(){
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview2/usermange")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res5) {
                    console.log(res5);
                    if (res5 != null) {
                        let data = res5;
                        let html="";
                        for (var i = 0; i < data.length; i++) {
                            html+= '<tr><td><h5 class="text-center">'+data[i].user+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            html+=     '</tr>';
                        };
                        $('#loading').hide();
                        $('#userdata').append(html);
                    }
                },
            });
        }
    })
    // 请求统计数据
    var logs=0;
    $('#logs').click(function(){
        if (logs == 0) {
            $('#loading').show();
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/logs_total")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {
                        $('#total').html(res.total);
                        $('#succ').html(res.succ);
                        $('#fail').html(res.fail);
                        let column = res.column;
                        let data = res.data;

                        let html="";
                        for (var i in column) {
                            html+= '<th ><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        $('#logtotals_column').append(html);
                        $('#tbodys').empty();
                        console.log(data);
                        let htmls="";
                        for (var i = 0; i < data.length; i++) {
                            htmls+= '<tr><td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            htmls+=     '<td><h5 class="text-center">'+data[i].status+'</h5></td>';
                            htmls+=     '<td><h5 class="text-center">'+data[i].info+'</h5></td>';
                            htmls+=     '</tr>';
                        };
                        $('#tbodys').append(htmls);
                    }
                },
            });

            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/logs")}',
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {
                        let column = res.column;
                        let theadhtml="";
                        for (var i in column) {
                            theadhtml+= '<th ><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        theadhtml+='<th width="24%"><h5 class="text-center">详情</h5></th>';
                        $('#logs_column').append(theadhtml);


                        let data = res.data;
                        let html="";
                        for (var i = 0; i < data.length; i++) {
                            let info = data[i].info;
                            let detail_html = '<h5 class="text-center"><button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button></h5>';
                            if (info.length > 0) {
                                let detail = '';
                                for (var m = 0; m < info.length; m++) {
                                    detail+= '<tr><td><h5 class="text-center">'+info[m].total+'</h5></td>';
                                    detail+=     '<td><h5 class="text-center">'+info[m].status+'</h5></td>';
                                    detail+=     '<td><h5 class="text-center">'+info[m].info+'</h5></td>';
                                    detail+=     '</tr>';
                                };
                                detail_html = '<h5 class="text-center">';
                                detail_html+=        '<button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button>';
                                detail_html+=    '</h5><div class="detail"><table class="table" style="width:100%">';
                                detail_html+=     '<thead><tr><th class="text-center">总数</th><th class="text-center">状态</th><th class="text-center">备注</th></tr></thead>';
                                detail_html+=     '<tbody>'+detail+'</tbody></table></div>';
                            };
                            if (info.length == 0) {
                                detail_html = '<h5 class="text-center"><button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button>';
                                detail_html+=    '</h5><div class="detail text-center">暂 无 详 情 ...</div>';
                            }
                            html+= '<tr><td><h5 class="text-center">'+data[i].date+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].uri+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].succ+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].fail+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].created_at+'</h5></td>';
                            html+=     '<td>'+detail_html+'</td>';
                            html+=     '</tr>';
                        };
                        $('#loading').hide();
                        logs = 1;
                        $('#datetbody').append(html);
                    }

                    $('.details').click(function(){
                        let disp = $(this).parent().next().css('display');
                        if (disp == 'block') {
                            $(this).parent().next().css('display','none');
                        } else{
                            $(this).parent().next().css('display','block');
                        };
                    })

                },
            });

        };
    })
</script>

<script type="text/javascript">


    $('#form2 .datetimerange').daterangepicker({
        timePicker: true, //显示时间
        timePicker24Hour: true, //时间制
        timePickerSeconds: true, //时间显示到秒
        startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
        endDate: moment(new Date()), //设置结束器日期
        "opens": "center",
        ranges: {
             // '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             '上周': [moment().subtract(6, 'days'), moment()],
             '前30天': [moment().subtract(29, 'days'), moment()],
              '本月': [moment().startOf('month'), moment().endOf('month')],
              '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
         },
         showWeekNumbers: true,
         locale: {
             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
             applyLabel: '确定', //确定按钮文本
             cancelLabel: '取消', //取消按钮文本
             customRangeLabel: '自定义',
             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
              monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                 '七月', '八月', '九月', '十月', '十一月', '十二月'
              ],
              firstDay: 1
         },
     }, function(start, end, label) {
        let starts = start.format('YYYY-MM-DD HH:mm:ss');
        let ends = end.format('YYYY-MM-DD HH:mm:ss');
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview2/usermange")}?start='+starts+'&end='+ends,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                console.log(res);
                let html="";
                $('#userdata').empty();
                for (var i = 0; i < res.length; i++) {
                    html+= '<tr><td><h5 class="text-center">'+res[i].user+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+res[i].total+'</h5></td>';
                    html+=     '</tr>';
                };
                $('#loading').hide();
                $('#userdata').append(html);
            },
        });
    });
</script>

